.header {
  height: 22px;
  width: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.far {
  height: 22px;
  width: 22px;
}

#phodit-editor {
  height: 100%;
  overflow-y: scroll;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
}

#phodit-editor.row {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.row {
  position: absolute;
}

.row .column {
  padding: 0;
  margin: 0;
}

textarea#input {
  border-radius: 0;
  padding: 1.5em;
  font-size: 14px;
  resize: horizontal; /* user can resize vertically, but width is fixed */
}

#input {
  width: 100vw;
  height: calc(100vh - 22px);
}

#tree-view {
  background: #21252b;
}

#input-section {
  height: calc(100vh - 22px);
  max-height: calc(100vh - 22px);
  overflow-y: scroll
}

.CodeMirror-dialog.CodeMirror-dialog-top {
  z-index: 12;
  position: absolute;
  bottom: 30px;
  width: 100vw;
  border-top: 1px solid #ddd;
  background: #fff;
}

#input .ace_search_form,
#input .ace_replace_form {
  border: none;
  border-radius: 0;
}

#input .ace_search_form {
  padding-right: 2em;
}

#input .ace_search.right {
  bottom: 0;
  top: inherit;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  border: 1px solid #ddd;
  background-color: #fdfdfd;
}

#output {
  padding: 1em;
  height: 100%;
  max-height: 100%;
  overflow-y: scroll;
}

#input .editor-toolbar {
  position: fixed;
  opacity: 1;
  background: #fdfdfd;
  z-index: 2;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #ddd;
  padding: 0 5px;
  top: -1px;
}

#input .editor-toolbar.fullscreen {
  padding-top: 10px;
}

#input .CodeMirror.CodeMirror-fullscreen {
  top: 49px;
}

#input .editor-toolbar.fullscreen:after,
#input .editor-toolbar:before,
#input .editor-toolbar:after {
  margin: 0;
}

#input .CodeMirror {
  font-size: 14px;
  top: 29px;
  position: relative;
  height: calc(100% - 22px);
  border-radius: 0;
}

#input .editor-statusbar {
  padding: 2px 10px;
  width: 100%;
  left: 0;
  bottom: 0;
  position: fixed;
  background: #fdfdfd;
  border-top: 1px solid #ddd;
  height: 22px;
  z-index: 9;
}

#input .editor-statusbar span.cursor {
  float: left;
  margin-left: 0;
  min-width: auto;
}

#tree-view .tree {
  width: 100%;
  padding-left: 10px;
}

#input .editor-preview-side {
  top: 33px;
}

#input.full-screen .editor-preview-side.editor-preview-active-side {
  top: 49px;
  border-left: 1px solid #ddd;
}

#input .editor-preview-side.editor-preview-active-side {
  top: 32px;
  border-left: none;
}

#terminal-section {
  position: absolute;
  width: 100%;
  right: 0;
  bottom: 21px;
  z-index: 9;
}

p {
  font-size: 14px;
  margin-bottom: 15px;
  margin-top: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 15px;
}

pre.prettyprint {
  border: none;
  border-left: 0.3rem solid #1abc9c !important;
}

figure {
  margin: 0;
}

blockquote, dl, figure, form, ol, p, pre, table, ul {
  margin-bottom: 16px;
}

ol li,
ul li,
li p {
  font-size: 14px;
  color: #384452;
}

interact-bar {
  background: #ddd;
  z-index: 999;
  position: fixed;
  width: 100%;
  bottom: 22px;
  left: 0;
}
